<template>
  <div class="min-h-screen bg-gray-50 ">
    <div class="max-w-6xl mx-auto px-4 py-6">
      <!-- Header -->
      <div class="mb-6">
        <div class="flex items-center justify-between">
          <div>
            <h1 class="text-2xl font-bold text-gray-900  mb-1">Team Center</h1>
            <p class="text-sm text-gray-600 ">
              Manage your AI teams and monitor their performance
            </p>
          </div>
          <router-link 
            to="/create-team"
            class="bg-blue-600 hover:bg-blue-700 text-white px-4 py-2 rounded-lg transition-colors duration-200 font-medium text-sm"
          >
            Create Team
          </router-link>
        </div>
      </div>

      <!-- Stats Overview -->
      <div class="grid grid-cols-2 lg:grid-cols-4 gap-4 mb-6">
        <div class="bg-white  rounded-lg border border-gray-200  p-4">
          <div class="flex items-center justify-between">
            <div>
              <p class="text-xs font-medium text-gray-500  uppercase tracking-wide">Total Teams</p>
              <p class="text-xl font-bold text-gray-900 ">{{ userTeams.length }}</p>
            </div>
            <div class="w-8 h-8 bg-blue-100  rounded-lg flex items-center justify-center">
              <svg class="w-4 h-4 text-blue-600 " fill="none" stroke="currentColor" viewBox="0 0 24 24">
                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M17 20h5v-2a3 3 0 00-5.356-1.857M17 20H7m10 0v-2c0-.656-.126-1.283-.356-1.857M7 20H2v-2a3 3 0 015.356-1.857M7 20v-2c0-.656.126-1.283.356-1.857m0 0a5.002 5.002 0 019.288 0M15 7a3 3 0 11-6 0 3 3 0 016 0zm6 3a2 2 0 11-4 0 2 2 0 014 0zM7 10a2 2 0 11-4 0 2 2 0 014 0z" />
              </svg>
            </div>
          </div>
        </div>

        <div class="bg-white  rounded-lg border border-gray-200  p-4">
          <div class="flex items-center justify-between">
            <div>
              <p class="text-xs font-medium text-gray-500  uppercase tracking-wide">Tasks Done</p>
              <p class="text-xl font-bold text-gray-900 ">{{ totalTasksCompleted }}</p>
            </div>
            <div class="w-8 h-8 bg-green-100  rounded-lg flex items-center justify-center">
              <svg class="w-4 h-4 text-green-600 " fill="none" stroke="currentColor" viewBox="0 0 24 24">
                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z" />
              </svg>
            </div>
          </div>
        </div>

        <div class="bg-white  rounded-lg border border-gray-200  p-4">
          <div class="flex items-center justify-between">
            <div>
              <p class="text-xs font-medium text-gray-500  uppercase tracking-wide">Success Rate</p>
              <p class="text-xl font-bold text-gray-900 ">{{ (averageSuccessRate || 0).toFixed(0) }}%</p>
            </div>
            <div class="w-8 h-8 bg-purple-100  rounded-lg flex items-center justify-center">
              <svg class="w-4 h-4 text-purple-600 " fill="none" stroke="currentColor" viewBox="0 0 24 24">
                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 7h8m0 0v8m0-8l-8 8-4-4-6 6" />
              </svg>
            </div>
          </div>
        </div>

        <div class="bg-white  rounded-lg border border-gray-200  p-4">
          <div class="flex items-center justify-between">
            <div>
              <p class="text-xs font-medium text-gray-500  uppercase tracking-wide">Active Teams</p>
              <p class="text-xl font-bold text-gray-900 ">{{ activeTeamsCount }}</p>
            </div>
            <div class="w-8 h-8 bg-orange-100  rounded-lg flex items-center justify-center">
              <svg class="w-4 h-4 text-orange-600 " fill="none" stroke="currentColor" viewBox="0 0 24 24">
                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 10V3L4 14h7v7l9-11h-7z" />
              </svg>
            </div>
          </div>
        </div>
      </div>

      <!-- Teams Grid -->
      <div class="grid grid-cols-1 lg:grid-cols-2 xl:grid-cols-3 gap-6">
        <div 
          v-for="team in userTeams" 
          :key="team.id"
          class="bg-white  rounded-lg border border-gray-200  hover:shadow-lg transition-all duration-200"
        >
          <!-- Team Header -->
          <div class="p-4 border-b border-gray-200 ">
            <div class="flex items-center justify-between mb-2">
              <h3 class="font-semibold text-gray-900  text-sm">{{ team.name }}</h3>
              <span class="inline-flex items-center px-2 py-1 rounded-full text-xs font-medium"
                :class="{
                  'bg-green-100 text-green-800  ': team.metadata.status === 'active',
                  'bg-gray-100 text-gray-800  ': team.metadata.status === 'completed',
                  'bg-yellow-100 text-yellow-800  ': team.metadata.status === 'paused'
                }"
              >
                {{ getStatusText(team.metadata.status) }}
              </span>
            </div>
            <p class="text-xs text-gray-600  line-clamp-2">{{ team.description }}</p>
          </div>

          <!-- Team Stats -->
          <div class="p-4">
            <div class="grid grid-cols-3 gap-3 mb-4">
              <div class="text-center">
                <p class="text-lg font-bold text-gray-900 ">{{ team.performance.tasksCompleted }}</p>
                <p class="text-xs text-gray-600 ">Tasks</p>
              </div>
              <div class="text-center">
                <p class="text-lg font-bold text-gray-900 ">{{ (team.performance?.successRate || 0).toFixed(0) }}%</p>
                <p class="text-xs text-gray-600 ">Success</p>
              </div>
              <div class="text-center">
                <p class="text-lg font-bold text-gray-900 ">${{ (team.performance?.totalCost || 0).toFixed(0) }}</p>
                <p class="text-xs text-gray-600 ">Cost</p>
              </div>
            </div>

            <!-- Team Members -->
            <div class="mb-4">
              <p class="text-xs font-medium text-gray-900  mb-2">Members</p>
              <div class="flex flex-wrap gap-1">
                <div 
                  v-for="agent in team.agents" 
                  :key="agent.id"
                  class="flex items-center space-x-1 px-2 py-1 bg-gray-100  rounded text-xs"
                >
                  <div class="w-1.5 h-1.5 rounded-full"
                    :class="{
                      'bg-green-500': agent.status === 'active',
                      'bg-yellow-500': agent.status === 'idle',
                      'bg-red-500': agent.status === 'error'
                    }"
                  ></div>
                  <span class="text-gray-700 ">{{ agent.name }}</span>
                </div>
              </div>
            </div>

            <!-- Project Info -->
            <div class="bg-gray-50 /50 rounded p-3 mb-4">
              <p class="text-xs font-medium text-gray-900  mb-1">Project</p>
              <p class="text-xs text-gray-600  line-clamp-2">{{ team.projectRequirements }}</p>
            </div>

            <!-- Budget & Timeline -->
            <div class="flex items-center justify-between mb-4">
              <div>
                <p class="text-xs font-medium text-gray-900 ">Budget</p>
                <p class="text-sm font-bold text-blue-600 ">${{ team.configuration.budget }}</p>
              </div>
              <div class="text-right">
                <p class="text-xs font-medium text-gray-900 ">Timeline</p>
                <p class="text-sm font-bold text-gray-900 ">{{ team.configuration.timeline }}</p>
              </div>
            </div>

            <!-- Last Activity -->
            <div class="flex items-center justify-between mb-4">
              <span class="text-xs text-gray-600 ">Last Active</span>
              <span class="text-xs font-medium text-gray-900 ">{{ formatLastActivity(team.performance.lastActivity) }}</span>
            </div>

            <!-- Actions -->
            <div class="flex items-center space-x-2">
              <button 
                class="flex-1 px-3 py-2 text-xs font-medium text-gray-600  hover:text-gray-700  border border-gray-200  rounded hover:bg-gray-50  transition-all duration-200"
              >
                Edit
              </button>
              <button 
                class="flex-1 px-3 py-2 text-xs font-medium text-blue-600  hover:text-blue-700  border border-blue-200  rounded hover:bg-blue-50  transition-all duration-200"
              >
                View
              </button>
            </div>
          </div>
        </div>
      </div>

      <!-- Empty State -->
      <div v-if="userTeams.length === 0" class="text-center py-12">
        <div class="w-16 h-16 bg-gray-100  rounded-full flex items-center justify-center mx-auto mb-4">
          <svg class="w-8 h-8 text-gray-400 " fill="none" stroke="currentColor" viewBox="0 0 24 24">
            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M17 20h5v-2a3 3 0 00-5.356-1.857M17 20H7m10 0v-2c0-.656-.126-1.283-.356-1.857M7 20H2v-2a3 3 0 015.356-1.857M7 20v-2c0-.656.126-1.283.356-1.857m0 0a5.002 5.002 0 019.288 0M15 7a3 3 0 11-6 0 3 3 0 016 0zm6 3a2 2 0 11-4 0 2 2 0 014 0zM7 10a2 2 0 11-4 0 2 2 0 014 0z" />
          </svg>
        </div>
        <h3 class="text-lg font-medium text-gray-900  mb-2">No teams created yet</h3>
        <p class="text-sm text-gray-600  mb-6">Start creating your first AI team to automate workflows</p>
        <router-link 
          to="/create-team"
          class="inline-flex items-center px-6 py-3 bg-blue-600 hover:bg-blue-700 text-white rounded-lg transition-colors duration-200 font-medium"
        >
          Create First Team
        </router-link>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
  import { computed, onMounted } from 'vue'
  import { useUserStore } from '../stores/user'

  const userStore = useUserStore()

  // Computed
  const userTeams = computed(() => userStore.userTeams)
  const totalTasksCompleted = computed(() => userStore.totalTasksCompleted)
  const averageSuccessRate = computed(() => userStore.averageSuccessRate)
  const activeTeamsCount = computed(() => {
    return userTeams.value.filter(team => team.metadata.status === 'active').length
  })

  // Methods
  const getStatusText = (status: string) => {
    const statusMap = {
      'active': 'Active',
      'completed': 'Completed',
      'paused': 'Paused'
    }
    return statusMap[status as keyof typeof statusMap] || status
  }

  const formatLastActivity = (date: Date) => {
    const now = new Date()
    const diff = now.getTime() - date.getTime()
    const minutes = Math.floor(diff / (1000 * 60))
    const hours = Math.floor(diff / (1000 * 60 * 60))
    const days = Math.floor(diff / (1000 * 60 * 60 * 24))

    if (minutes < 60) {
      return `${minutes}m ago`
    } else if (hours < 24) {
      return `${hours}h ago`
    } else {
      return `${days}d ago`
    }
  }

  // Lifecycle
  onMounted(async () => {
    await userStore.fetchUserTeams()
  })
</script>

<style scoped>
  .line-clamp-2 {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
  }
</style>